<template>
  <div class="music-list">
    <div class="back" @click="back">
      <span class="iconfont icon-back">&#xe67c;</span>
    </div>
    <h1 class="title" v-html="title"></h1>
    <div class="back-img" :style="bgStyle" ref="backImg">>
      <div class="play-wrapper">
        <div class="play" v-show="songs.length" ref="playBtn">
          <span class="iconfont icon-play">&#xe710;</span>
          <span class="play-title">随机播放全部</span>
        </div>
      </div>
      <div class="filter" ref="filter"></div>
    </div>
    <div class="layer" ref="layer"></div>
    <scroll
      :probe-type="probeType"
      :scroll-listener="scrollListener"
      @scroll="scroll"
      :data="songs"
      class="list"
      ref="list"
    >
      <div class="song-list-wrapper">
        <song-list :songs="songs"></song-list>
      </div>
      <div class="loading-wrapper" v-show="!songs.length">
        <loading></loading>
      </div>
    </scroll>
  </div>
</template>

<script>
  import SongList from 'base/song-list/song-list'
  import Scroll from 'base/scroll/scroll'
  import Loading from 'base/loading/loading'
  import {prefixStyle} from 'common/js/dom'

  const TITLE_HEIGHT = 40
  const TRANSFORM = prefixStyle('transform')
  const BACKDROPFILTER = prefixStyle('backdrop-filter')
  export default {
    name: "music-list",
    props: {
      bgImage: {
        type: String,
        default: ''
      },
      songs: {
        type: Array,
        default: []
      },
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        scrollY: -1
      }
    },
    components: {
      Scroll,
      SongList,
      Loading
    },
    created() {
      this.probeType = 3
      this.scrollListener = true
    },
    mounted() {
      this.backImgHeight = this.$refs.backImg.clientHeight
      this.minTransformheight = -this.backImgHeight + TITLE_HEIGHT
      this.$refs.list.$el.style.top = `${this.backImgHeight}px`
    },
    computed: {
      bgStyle() {
        return `background-image:url(${this.bgImage})`
      }
    },
    watch: {
      scrollY(newY) {
        console.log('newY-->' + newY)
        let minY = Math.max(newY, this.minTransformheight)
        this.$refs.layer.style[TRANSFORM] = `translate3d(0,${minY}px,0)`
        let zIndex = 0
        let scale = 1
        let blur = 0
        let percent = Math.abs(newY / this.backImgHeight)
        if (newY > 0) {
          //向下拉
          scale = 1 + percent
          zIndex = 10
        } else {
          blur = Math.min(20 * percent, 20)
        }
        this.$refs.filter.style[BACKDROPFILTER] = `blur(${blur}px)`
        if (newY < this.minTransformheight) {
          zIndex = 10
          this.$refs.backImg.style.paddingTop = 0
          this.$refs.backImg.style.height = `${TITLE_HEIGHT}px`
          this.$refs.playBtn.style.display = 'none'
        } else {
          this.$refs.backImg.style.paddingTop = '70%'
          this.$refs.backImg.style.height = 0
          this.$refs.playBtn.style.display = ''
        }
        this.$refs.backImg.style.zIndex = zIndex
        this.$refs.backImg.style.transform = `scale(${scale})`
        this.$refs.backImg.style.webkitTransform = `scale(${scale})`
      }
    },
    methods: {
      scroll(pos) {
        this.scrollY = pos.y
      },
      back(){
        this.$router.push({
          path:'/singer'
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import '~common/stylus/mixin.styl'
  @import '~common/stylus/variable.styl'
  .music-list
    position: fixed
    z-index: 100
    top: 0
    left: 0
    bottom: 0
    right: 0
    background $color-background
    .back
      position absolute
      top 0
      left 6px
      z-index 50
      text-align center
      .icon-back
        font-size 22px
        padding 10px
        display block
    .title
      position absolute
      top 0
      left 10%
      width 80%
      line-height 40px
      height 40px
      text-align center
      font-size 18px
      color $color-text
      z-index 40
      no-wrap()
    .back-img
      position relative
      top 0
      width 100%
      height 0
      padding-top 70%
      background-size cover
      transform-origin top
      .play-wrapper
        position absolute
        bottom 20px
        width 100%
        z-index 50
        .play
          box-sizing border-box
          width 135px
          padding 7px 0
          margin 0 auto
          border 1px solid $color-theme
          color $color-theme
          font-size 0
          text-align center
          border-radius 100px
          .icon-play
            display inline-block
            font-size $font-size-medium-x
            vertical-align middle
            margin-right 6px
          .play-title
            display inline-block
            font-size $font-size-small
            vertical-align middle
      .filter
        position absolute
        top 0
        left 0
        width 100%
        height 100%
        background rgba(7, 17, 27, 0.4)
    .layer
      position relative
      background $color-background
      left 0
      top 0
      height 100%
      width 100%
    .list
      position fixed
      top 0
      bottom 0
      width 100%
      background $color-background
      .song-list-wrapper
        padding 20px 30px
      .loading-wrapper
        position absolute
        top 50%
        width 100%
        transform translateY(-50%)

</style>
